<template>
  <div>
    <el-page-header content="用户信息" @back="goBack">
    </el-page-header>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-table
          :data="admins"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="id"
            label="用户编号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="用户昵称"
            width="100">
          </el-table-column>
          <el-table-column
            prop="code"
            label="账号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="100">
          </el-table-column>
          <el-table-column
            prop="country"
            label="国家"
            width="100">
          </el-table-column>
          <el-table-column
            prop="province"
            label="省份"
            width="100">
          </el-table-column>
          <el-table-column
            prop="city"
            label="城市"
            width="100">
          </el-table-column>
          <el-table-column
            prop="state"
            label="用户状态"
            width="100">
          </el-table-column>
          <el-table-column
            prop="avatarUrl"
            label="头像"
            width="600">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data(){
    return {
        admins:[],
        currentsize:1,
        pagesize:3,
        // 分页
        currentPage: 1,
        total:0,
        pagesize:3,
    }
  },
  methods:{
    init(){
      let obj = {
        currentsize:this.currentPage, 
        pagesize:this.pagesize
      }
      this.$ajax({
        url:"admin/users",
        method:"get",
        params:obj
      }).then(resp=>{
        this.admins = resp.data.message;
        this.total = resp.data.totalPage;
      })
      
    },
    // 数据表格
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'warning-row';
      } else{
        return 'success-row';
      }
    },
    // 分页
    handleSizeChange(val) {
      this.pagesize = val
      this.init();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
      // console.log(`当前页: ${val}`);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goBack() {
      this.$router.push("/")
    }
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>
/* 数据表格 */
.el-table .warning-row {
    background: oldlace;
  }
.el-table .success-row {
  background: #f0f9eb;
}
</style>